<template>
  <div id="manor">
    <div class="head">
      <div  class="align-center">
        <img class="top_img" src="@/assets/images/a8.png" style="width:35px;height:35px;margin-right:10px;"/>
        <div style="line-height: 40px;font-weight:bold;">中奖设置</div>
      </div>
      <el-button type="primary" class="custom_color_button1" @click="handleToDetails">
        <img class="custom_color_button1_img" src="@/assets/images/but_bg6.png"/>设置明细
      </el-button>
    </div>
    <div class="flex">
      <div class="box-left flex flex-column">
        <ring-view title="参考系数" :border="border" :number="reference_ratio"></ring-view>
        <div class="left-button align-center">
          <img @click="bfactor_popup = true" class="left-button-img" src="@/assets/images/eit.png" />
          <span class="left-button-text">修改系数</span>
        </div>
      </div>
      <div class="box-right align-center">
        <div v-for="(item,index) in typeList" :key="index"
             class="right-item">
          <div class="item-head align-center">
            <img class="item-head-img" :src="urlimg + item.level_logo" />
            <span class="item-head-text">{{ item.title }}</span>
          </div>
          <div class="content-box align-center">
            <ring-view title="设置人数"
                       @handleEitNum="handleEitNum"
                       :border="borderList[index]" :image="image"
                       :maid="item.maid"
                       :index="index"
                       :number="item.win_price_number"></ring-view>
            <div class="box-top-right">
              <div class="align-center margin-bottom-28">
                <i :class="index === 0?'b-blue':index === 1?'b-FEB800':index === 2?'b-FF5819':'b-00B3FE'" class="bit"></i>
                <span class="bit-title">产出价值</span>
                <span class="bit-text">{{ item.product_price }}</span>
              </div>
              <div class="align-center margin-bottom-28">
                <i :class="index === 0?'b-blue':index === 1?'b-FEB800':index === 2?'b-FF5819':'b-00B3FE'" class="bit"></i>
                <span class="bit-title">产出数量</span>
                <span class="bit-text">{{ item.product_number }}</span>
              </div>
              <div class="align-center margin-bottom-28">
                <i :class="index === 0?'b-blue':index === 1?'b-FEB800':index === 2?'b-FF5819':'b-00B3FE'" class="bit"></i>
                <span class="bit-title">平 均 值</span>
                <span class="bit-text">{{ item.average }}</span>
              </div>
              <div class="align-center">
                <i :class="index === 0?'b-blue':index === 1?'b-FEB800':index === 2?'b-FF5819':'b-00B3FE'" class="bit"></i>
                <span class="bit-title">中奖价值</span>
                <span class="bit-text">{{ item.win_price }}</span>
              </div>
            </div>
          </div>
          <div class="box-bottom align-center">
            <div class="align-center flex-column">
              <div class="bottom-title">奖池人数</div>
              <div class="bottom-text">{{ item.reward_number }}</div>
            </div>
            <div class="align-center flex-column">
              <div class="bottom-title">中奖推荐</div>
              <div class="bottom-text">{{ item.recommend }}</div>
            </div>
            <div class="align-center flex-column">
              <div class="bottom-title">可用人数</div>
              <div class="bottom-text">{{ item.can_user_number }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改系数 -->
    <el-dialog title="修改系数" :visible.sync="bfactor_popup"  width="300px" :close-on-click-modal="false">
      <div style="width:100%;">
        <el-input  v-model.trim="reference_ratio_eit" placeholder="请输入"></el-input>
        <div style="text-align: center;width:50%;margin: 30px auto 0;">
          <el-button type="primary" class="custom_color_button" style="width:80%;" @click="handleConfirmEit()">确认</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 修改人数 -->
    <el-dialog title="设置人数" :visible.sync="maid_popup"  width="300px" :close-on-click-modal="false">
      <div style="width:100%;">
        <el-input  v-model.trim="maid_eit_num" placeholder="请输入"></el-input>
        <div style="text-align: center;width:50%;margin: 30px auto 0;">
          <el-button type="primary" class="custom_color_button" style="width:80%;" @click="handleConfirmMaid()">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import RingView from '@/view/Manor/ringView'

export default {
  name: 'WinningSetting',
  data () {
    return {
      reference_ratio: 0,
      reference_ratio_eit: 0,
      maid_eit_num: 0,
      bfactor_popup: false,
      maid_popup: false,
      typeList: [],
      item_index: -1,
      item_maid: '',
      border: 'border: 16px solid #00C693;',
      image: require('@/assets/images/eit_kong.png'),
      borderList: ['border: 16px solid #3C46EF;','border: 16px solid #FEB800;','border: 16px solid #FF5819;','border: 16px solid #00B3FE;']
    }
  },
 components:{
   RingView
  },
  created(){
    this.getPageInfo()
  },
  mounted (){

  },
  methods: {
    /**
     * 获取页面信息
     */
    getPageInfo() {
      this.post("win_price/winPriceSet", {}).then(res => {
          const { settingscale, manorList } = res.result
          this.reference_ratio = Number(settingscale)
          this.typeList = manorList
        })
    },
    /**
     * 跳转设置明细
     */
    handleToDetails() {
        this.$router.push({
        path: '/index/setDetails',
        // query: {
        //   name:row.telphone,
        //   id:row.uid,
        // }
      })
    },
    /**
     * 确认修改系数
     */
    handleConfirmEit() {
      const inspect = new RegExp('^(-?\\d+)(\\.\\d+)?$')
      if(!inspect.test(this.reference_ratio_eit)) return this.$message.warning({message: '请输入数字', center: true})
      this.post("win_price/changeScale", {
        settingscale: this.reference_ratio_eit
      }).then(res => {
        this.$message.success({ message: res.result, center: true })
        this.bfactor_popup = false
        this.reference_ratio = this.reference_ratio_eit
        this.reference_ratio_eit = 0
      })
    },
    /**
     * 修改人数
     */
    handleEitNum(e) {
      this.item_index = e.index
      this.item_maid = e.maid
      this.maid_popup = true
    },
    /**
     * 确认修改系数
     */
    handleConfirmMaid() {
      const inspect = new RegExp('^[0-9]*$')
      if(!inspect.test(this.maid_eit_num)) return this.$message.warning({message: '请输入整数', center: true})
      this.post("win_price/changeSettingNumber", {
        maid: this.item_maid,
        setting_number: this.maid_eit_num
      }).then(res => {
        this.$message.success({ message: res.result, center: true })
        this.$set(this.typeList[this.item_index],'win_price_number',Number(this.maid_eit_num))
        this.maid_popup = false
        this.item_index = -1
        this.maid_eit_num = 0
        this.item_maid = ''
      })
    },
  }
}
</script>


<style scoped>
  .flex {
    display: flex;
  }
  .align-center {
    display: flex;
    align-items: center;
  }
  .justify-center {
    display: flex;
    justify-content: center;
  }
  .flex-column {
    flex-direction: column;
  }
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .box-left {
    padding: 25px 31px 0;
  }
  .left-button {
    margin-top: 42px;
    padding: 18px 59px 18px 55px;
    background: #FEFFFF;
    border: 3px solid #EEEEEE;
    border-radius: 10px;
  }
  .left-button-img {
    width: 47px;
    height: 47px;
    cursor: pointer;
  }
  .left-button-text {
    margin-left: 25px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #5E6C84;
  }
  .box-right {
    margin: 0 39px 0 29px;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .right-item {
    width: 48%;
    box-shadow: 0px 31px 67px 0px rgba(0, 0, 0, 0.04);
  }
  .item-head-img {
    width: 52px;
    height: 52px;
  }
  .item-head-text {
    margin-left: 19px;
    font-size: 29px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #344563;
  }
  .content-box {
    margin-top: 34px;
    background-color: #FFFFFF;
    padding: 1px 0 0 36px;
  }
  .box-top-right {
    margin-left: 59px;
  }
  .bit {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
  .bit-title {
    margin: 0 9px 0 14px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #5E6C84;
  }
  .bit-text {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #888888;
  }
  .b-blue {
    background-color: #3C46EF;
  }
  .b-FEB800 {
    background-color: #FEB800;
  }
  .b-FF5819 {
    background-color: #FF5819;
  }
  .b-00B3FE {
    background-color: #00B3FE;
  }
  .margin-bottom-28 {
    margin-bottom: 28px;
  }
  .box-bottom {
    margin-top: 42px;
    padding: 0 108px 48px 57px;
    justify-content: space-between;
  }
  .bottom-title {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #5E6C84;
  }
  .bottom-text {
    margin-top: 20px;
    font-size: 54px;
    font-family: Myriad Pro;
    font-weight: 400;
    color: #344563;
    line-height: 46px;
  }
</style>
